﻿@model DTOs.PagedData<DTOs.ProductDTO>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">

    function highlightCart() {
        //alert("cart");
//        $("#addToCart").toggle({
//            color: '#FF0000'
//        }, 1500);
    }

    // if a page number is clicked
    $(".page-number").on("click", function () {


        var page = parseInt($(this).html());
        //alert(page);
        loadProducts($("ul#catlist li:first a").attr("id"), page);


    });

</script>


    <div id="rightcontent">
    	<div class="maincontent">

        @foreach (var itm in Model.Data)
        { 

        	<div class="products">
            	<div class="product_head">@itm.Name</div>
                <div class="product_image"><img class="product_image" src="@Url.Content(@System.Configuration.ConfigurationManager.AppSettings["PRODUCTIMAGEFOLDER"] +"\\"+ @itm.Image)" alt="img" /></div>
                
                @*<div class="product_head">@itm.Description</div>*@
                <div class="product_price"> @itm.Description <br />@itm.Price

                 @using (Ajax.BeginForm("AddtoCart", "ShoppingCart", new AjaxOptions() { UpdateTargetId = "addToCart", InsertionMode = InsertionMode.Replace, HttpMethod = "post", OnSuccess = "highlightCart" }))
                 {
                         <input type="hidden" name="productId" value = "@itm.ProductId" />
                         <input type="hidden" name="quantity" value = "1" />
                         <input type="submit" class="addtocart" value="add to cart"/>
                     }
                     </div>
            </div>
        }
          @*  <div class="products">
            	<div class="product_head">PRODUCT NAME</div>
                <div class="product_image"></div>
                <div class="product_price"></div>
            </div>
            
            <div class="products">
            	<div class="product_head">PRODUCT NAME</div>
                <div class="product_image"></div>
                <div class="product_price"></div>
            </div>
            
            <div class="products">
            	<div class="product_head">PRODUCT NAME</div>
                <div class="product_image"></div>
                <div class="product_price"></div>
            </div>
            <div class="products">
            	<div class="product_head">PRODUCT NAME</div>
                <div class="product_image"></div>
                <div class="product_price"></div>
            </div>
            <div class="products">
            	<div class="product_head">PRODUCT NAME</div>
                <div class="product_image"></div>
                <div class="product_price"></div>
            </div>
            <div class="products">
            	<div class="product_head">PRODUCT NAME</div>
                <div class="product_image"></div>
                <div class="product_price"></div>
            </div>
            <div class="products">
            	<div class="product_head">PRODUCT NAME</div>
                <div class="product_image"></div>
                <div class="product_price"></div>
            </div>
           *@
        
        <div class="clear"></div>
        </div>
        
        
        @*<div class="offers">
        	<div class="newarrival">
            	<div class="arrow"></div>
            
            </div>
        
        </div>
        <div class="offers">
        	<div class="newarrival"></div>
        
        </div>*@
        <table>
    <tfoot>
        <tr>
            <td colspan="3">
                @for (int i = 1; i <= Model.NumberOfPages; i++)
                {
                    if (i == Model.CurrentPage)
                    {
                        @i
                    }
                    else
                    {
                        <a class="page-number" href="javascript:void();">@i</a>
                    }
                }
            </td>
        </tr>
    </tfoot>
    </table>
        </div>
    
      
    
    </div>
   
   